<!--
 * @Author: huangximian huangximian@e-ling.com.cn
 * @Date: 2022-05-25 11:39:00
 * @LastEditors: huangximian huangximian@e-ling.com.cn
 * @LastEditTime: 2022-06-06 10:11:16
 * @FilePath: \jcyy-official-website\src\views\computerSide\pages\contactUs\contactUstab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="homeindex_top">
      <img src="../../../../assets/images/u58.png" alt="" />
    </div>

    <div class="content">
      <div class="tab_text">
        <div
          v-for="nav in list"
          :key="nav.id"
          :class="nav.booler ? 'tabture' : ''"
          @click="tab(nav.id)"
        >
          {{ nav.name }}
        </div>
      </div>

      <div class="contactUS">
        <div v-if="type == '1'">
          <div class="contactUS_title">
            <img src="../../../../assets/icon/组 318.png" alt="" />
            <span>入住体验</span>
            <img src="../../../../assets/icon/组 319.png" alt="" />
          </div>

          <div class="form_post">
            <el-form
              :inline="true"
              :model="formInline"
              :rules="rules"
              ref="formInline"
              class="demo-form-inline"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item prop="fullname">
                <div class="search">
                  <input v-model="formInline.fullname" placeholder="姓名" />
                </div>
              </el-form-item>
              <el-form-item prop="cellphonenumber">
                <div class="search">
                  <input
                    v-model="formInline.cellphonenumber"
                    placeholder="手机号"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_a">
                  <input v-model="formInline.name" placeholder="槿椿颐养中心" />
                </div>
              </el-form-item>
              <div>
                <el-form-item prop="VerificationCode">
                  <div class="searchs">
                    <input
                      v-model="formInline.VerificationCode"
                      placeholder="输入短信验证码"
                    />
                    <button
                      type="button"
                      @click="countDown"
                      ref="verification "
                    >
                      {{ btnMsg || countNum }}
                    </button>
                  </div>
                </el-form-item>
              </div>

              <el-form-item prop="remarks">
                <div class="search_a_hase">
                  <input
                    v-model="formInline.remarks"
                    placeholder="备注(非必填)"
                  />
                </div>
              </el-form-item>

              <el-form-item>
                <div class="search_a_hase_butten">
                  <button type="button" @click="submitForm('formInline')">
                    提交
                  </button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div v-if="type == '2'">
          <div class="contactUS_title">
            <img src="../../../../assets/icon/组 318.png" alt="" />
            <span>志愿服务</span>
            <img src="../../../../assets/icon/组 319.png" alt="" />
          </div>

          <div class="form_post">
            <el-form
              :inline="true"
              :model="voluntaryService"
              :rules="rules"
              ref="voluntaryService"
              class="demo-form-inline"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item prop="fullname">
                <div class="search">
                  <input
                    v-model="voluntaryService.fullname"
                    placeholder="姓名"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="cellphonenumber">
                <div class="search">
                  <input
                    v-model="voluntaryService.cellphonenumber"
                    placeholder="手机号"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_a">
                  <input
                    v-model="voluntaryService.name"
                    placeholder="槿椿颐养中心"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_personal">
                  <input
                    v-model="voluntaryService.personal"
                    placeholder="个人"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_volunteer">
                  <input
                    v-model="voluntaryService.numberofvolunteers"
                    placeholder="志愿人数"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="remarks">
                <div class="search_a_hase">
                  <input
                    style="width: 117rem"
                    v-model="voluntaryService.remarks"
                    placeholder="备注(非必填)"
                  />
                </div>
              </el-form-item>
              <div class="searchs_left">
                <div>
                  <el-form-item prop="VerificationCode">
                    <div class="searchs">
                      <input
                        v-model="voluntaryService.VerificationCode"
                        placeholder="输入短信验证码"
                      />
                      <button
                        type="button"
                        @click="countDown"
                        ref="verification "
                      >
                        {{ btnMsg || countNum }}
                      </button>
                    </div>
                  </el-form-item>
                </div>
                <el-form-item>
                  <div class="search_a_hase_butten">
                    <button
                      type="button"
                      @click="submitForm('voluntaryService')"
                    >
                      提交
                    </button>
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>

        <div v-if="type == '3'">
          <div class="contactUS_title">
           <img src="../../../../assets/icon/组 318.png" alt="" />
            <span>合作招商</span>
            <img src="../../../../assets/icon/组 319.png" alt="" />
          </div>

          <div class="form_post">
            <el-form
              :inline="true"
              :model="formInline"
              :rules="rules"
              ref="formInline"
              class="demo-form-inline"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item prop="fullname">
                <div class="search">
                  <input v-model="formInline.fullname" placeholder="公司名称" />
                </div>
              </el-form-item>
              <el-form-item prop="cellphonenumber">
                <div class="search">
                  <input
                    v-model="formInline.cellphonenumber"
                    placeholder="手机号"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_a">
                  <input v-model="formInline.name" placeholder="槿椿颐养中心" />
                </div>
              </el-form-item>
              <div>
                <el-form-item prop="VerificationCode">
                  <div class="searchs">
                    <input
                      v-model="formInline.VerificationCode"
                      placeholder="输入短信验证码"
                    />
                    <button
                      type="button"
                      @click="countDown"
                      ref="verification "
                    >
                      {{ btnMsg || countNum }}
                    </button>
                  </div>
                </el-form-item>
              </div>

              <el-form-item prop="remarks">
                <div class="search_a_hase">
                  <input
                    v-model="formInline.remarks"
                    placeholder="备注(非必填)"
                  />
                </div>
              </el-form-item>

              <el-form-item>
                <div class="search_a_hase_butten">
                  <button type="button" @click="submitForm('formInline')">
                    提交
                  </button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div v-if="type === '4'">
          <div class="contactUS_title">
           <img src="../../../../assets/icon/组 318.png" alt="" />
            <span>参观学习</span>
            <img src="../../../../assets/icon/组 319.png" alt="" />
          </div>

          <div class="form_post">
            <el-form
              :inline="true"
              :model="formInline"
              :rules="rules"
              ref="formInline"
              class="demo-form-inline"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item prop="fullname">
                <div class="search">
                  <input v-model="formInline.fullname" placeholder="姓名" />
                </div>
              </el-form-item>
              <el-form-item prop="cellphonenumber">
                <div class="search">
                  <input
                    v-model="formInline.cellphonenumber"
                    placeholder="手机号"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_a">
                  <input v-model="formInline.name" placeholder="槿椿颐养中心" />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_personal">
                  <input v-model="formInline.name" placeholder="个人" />
                </div>
              </el-form-item>
              <el-form-item prop="name">
                <div class="search_volunteer">
                  <input v-model="formInline.name" placeholder="志愿人数" />
                </div>
              </el-form-item>
              <el-form-item prop="remarks">
                <div class="search_a_hase">
                  <input
                    style="width: 117rem"
                    v-model="formInline.remarks"
                    placeholder="备注(非必填)"
                  />
                </div>
              </el-form-item>
              <div class="searchs_left">
                <div>
                  <el-form-item prop="VerificationCode">
                    <div class="searchs">
                      <input
                        v-model="formInline.VerificationCode"
                        placeholder="输入短信验证码"
                      />
                      <button
                        type="button"
                        @click="countDown"
                        ref="verification "
                      >
                        {{ btnMsg || countNum }}
                      </button>
                    </div>
                  </el-form-item>
                </div>
                <el-form-item>
                  <div class="search_a_hase_butten">
                    <button type="button" @click="submitForm('formInline')">
                      提交
                    </button>
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>

        <div class="address">
          <p>
            <span>入住体验说明：</span
            >契合济南“千亿产业”计划，创新康养服务模式，拓展康养服务领域，加快推进医养结合，致力于推动康养服务社会化、产业化，开展养老综合体、健康综合体、养老公寓、医疗康养产业园等服务设施建设，打造济南历下区区域康养服务生态圈。
          </p>
          <img src="../../../../assets/images/u6632.png" alt="" />
        </div>
      </div>
    </div>
    <!-- <div v-html="winStatus==0 ? `<span>剩余<span class='remaining'>${this.drawNum|| 0}</span>次机会</span>` : ''">
     </div> -->
    <div style="height: 10rem"></div>
  </div>
</template>
<script>
let ulrr = window.location.search.substring(6) || "1";
export default {
  data() {
    return {
      //   winStatus:0,
      formInline: {
        fullname: "",
        cellphonenumber: "",
        name: "",
        VerificationCode: "",
        remarks: "",
      },
      voluntaryService: {
        fullname: "",
        cellphonenumber: "",
        name: "",
        personal: "",
        VerificationCode: "",
        numberofvolunteers: "",
        remarks: "",
      },
      rules: {
        fullname: [
          { required: true, message: "请输入您的姓名", trigger: "blur" },
        ],
        cellphonenumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入正确的手机号码或者座机号",
          },
        ],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        VerificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        personal: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      list: [
        {
          name: "入住体验",
          url: "#",
          booler: true,
          id: "1",
        },
        {
          name: "志愿服务",
          url: "#",
          booler: false,
          id: "2",
        },
        {
          name: "合作招商",
          url: "#",
          booler: false,
          id: "3",
        },
        {
          name: "参观学习",
          url: "#",
          booler: false,
          id: "4",
        },
      ],
      type: 1,
      // 倒计时周期
      countNum: 60,
      // 用于倒计时标记，true-正在倒计时
      countFlag: false,
      btnMsg: "获取验证码",
    };
  },
  created() {
    this.tab(ulrr);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取验证码
    verificationCode() {
      console.log(this.$refs);
    },
    tab(i) {
      for (const a of this.list) {
        if (a.id === i) {
          a.booler = true;
        } else {
          a.booler = false;
        }
      }
      this.type = i;
    },

    // 发送倒计时
    countDown() {
      this.countFlag = !this.countFlag;
      if (this.btnMsg) {
        this.btnMsg = null;
        this.intervalBtn = setInterval(() => {
          if (this.countNum <= 0) {
            this.btnMsg = "获取验证码";
            clearInterval(this.intervalBtn);
            this.countFlag = !this.countFlag;
            this.countNum = 60;
          }
          // 倒计时
          this.countNum--;
        }, 1000);
      } else {
        // alert("请勿重复操作");
      }
    },
  },
};
</script>
<style scoped>
.tab_text {
  display: flex;
  width: 100%;
  border-bottom: 3px solid #299399;
}

.tab_text > div {
  width: 30rem;
  height: 6rem;
  text-align: center;
  font-size: 2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 6rem;
}
.contactUS {
  margin-top: 5.6rem;
}
.contactUS_title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contactUS_title span {
  font-size: 3.2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #299399;
  margin: 0px 1.6rem 0px 1.6rem;
}
.search input {
  width: 25.6rem;
  height: 2.6rem !important;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  outline-color: #f78b0f;
}
.searchs input {
  width: 17rem;
  height: 2.6rem !important;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  outline-color: #f78b0f;
}
.search_a input {
  width: 26rem;
  height: 2.6rem !important;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  outline-color: #f78b0f;
}

.search_personal input {
  width: 12.6rem;
  height: 2.6rem !important;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  outline-color: #f78b0f;
}
.search_volunteer input {
  width: 12.3rem;
  height: 2.6rem !important;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  outline-color: #f78b0f;
}
.searchs {
  display: flex;
}
.searchs button {
  background: #299399;
  width: 10.6rem;
  height: 4.6rem;
  border: 0px;
  font-size: 1.6rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.search_a_hase input {
  width: 84rem;
  height: 2.6rem !important;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  outline-color: #f78b0f;
}
.search_a_hase_butten button {
  background: #299399;
  width: 29.5rem;
  height: 4.6rem;
  border: 0px;
  font-size: 1.6rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.form_post {
  margin-top: 1.9rem;
}
.address {
  margin-top: 4.8rem;
}
.address p {
  font-size: 2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 4rem;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 3.2rem;
}
.address p span {
  color: #d51010;
  font-weight: bold;
}
.address img {
  width: 100%;
}
input {
  font-size: 1rem;
}
.searchs_left {
  display: flex;
  margin-left: 59rem;
}
</style>
<style>
.el-form--inline .el-form-item {
  display: inline-block;
  margin-right: 1rem !important;
  vertical-align: top;
}
.el-form-item__content {
  line-height: 4rem !important;
  position: relative;
  font-size: 1.4rem !important;
}
</style>